<template>
  <div class="tableList">
    <div>
      <el-table :data="dataList[0]" stripe style="width: 100%">
        <el-table-column prop="name" label="传感器名称" align="center"></el-table-column>
        <el-table-column prop="minValue" label="最小值" align="center"></el-table-column>
        <el-table-column prop="jsonObjectList" label="监测数据" align="center">
          <template slot-scope="scope">
            <img @click="lineDetail(scope.row)" src="@/assets/healthMonitorAssets/img/line.png" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="maxValue" label="最大值" align="center"></el-table-column>
      </el-table>
    </div>
    <div>
      <el-table :data="dataList[1]" stripe style="width: 100%">
        <el-table-column prop="name" label="传感器名称" align="center"></el-table-column>
        <el-table-column prop="minValue" label="最小值" align="center"></el-table-column>
        <el-table-column  label="监测数据" align="center">
          <template slot-scope="scope">
            <img  @click="lineDetail(scope.row)" src="@/assets/healthMonitorAssets/img/line.png" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="maxValue" label="最大值" align="center"></el-table-column>
      </el-table>
    </div>
    <div>
      <el-table :data="dataList[2]" stripe style="width: 100%">
        <el-table-column prop="name" label="传感器名称" align="center"></el-table-column>
        <el-table-column prop="minValue" label="最小值" align="center"></el-table-column>
        <el-table-column prop="jsonObjectList" label="监测数据" align="center">
          <template slot-scope="scope">
            <img  @click="lineDetail(scope.row)" src="@/assets/healthMonitorAssets/img/line.png" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="maxValue" label="最大值" align="center"></el-table-column>
      </el-table>
    </div>

     <vx-popup
      :title="title"
      width="980px"
      :btnGroup = []
      @close="visiable = false"
      :active.sync="visiable"
      @confirmPopup="visiable = false"
      @cancelPopup="visiable = false"
    >
      <div ref="chartsContainer" class="chartsContainer"></div>
    </vx-popup>

  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      dataList: [],
      chartsData:[],
      visiable:false,
      title:"",
      xAxis:[],
      yAxis:[]
    };
  },
  components: {},
  props: {
    data:{
      type:Array
    }
  },
  mounted(){
    // this.drawLine();
    window.addEventListener("resize", () => {
      this.line.resize();
    });
  },
  methods:{
   // 将数组切割成等份
    spliteNumber(array, subGroupLength){
      let index = 0;
      let newArray = [];
      while(index < array.length) {
          newArray.push(array.slice(index, index += subGroupLength));
      }
      return newArray;
    },
    lineDetail(data){
        console.log(data)
        this.chartsData = data.jsonObjectList
        this.maxValue = parseInt(data.maxValue + 10);
        this.minValue = parseInt(data.minValue - 10)
        this.title = data.name
        this.visiable = true
        // 折线图数据转换
        this.xAxis = [];
        this.yAxis = [];
        this.chartsData.map((item,key)=>{
          this.xAxis.push(this.parseTime(item.time));
          this.yAxis.push(item.value)
        })


        this.drawLine();

    },

    parseTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

      let strDate = Y + M + D + h + m + s;
      console.log(strDate);
      return strDate;
    },

    // 绘制图表
    drawLine () {
      this.line = new echarts.init(this.$refs.chartsContainer);
      this.line.setOption({
        title: {
          text: this.title,
          left: "center",
          top: "0%",
          textStyle: {
            color: "#327BDC",
            fontSize: 18
          }
        },
        grid: {
          top: '8%',
          right: '2%',
          left: '5%',
          bottom:"5%"
        },
        tooltip: {
        "trigger": "axis",
        "axisPointer": {
            "type": "none"
        },
        
    },
        xAxis: [{
          type: 'category',
          data: this.xAxis,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#E5E6EB"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#E5E6EB"
            }
          },
          boundaryGap: false,
          axisLabel: {
            color: "#A7A6AF",
            fontSize: 15
          }
        }],
        yAxis: [{
          type: 'value',
          max: this.maxValue,
          min: this.minValue,
          axisTick: {
            show: false
          },
          splitNumber: 4,
          splitLine: {
            show: false
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: ['#F5F6FA', '#fff']
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#E5E6EB"
            },
          },
          axisLabel: {
            color: "#A7A6AF",
            fontSize: 15
          }
        }],
         dataZoom: [
        {
            show: false,
            realtime: true,
            // start: 70,
            // end: 100
        },
        {
            type: 'inside',
            realtime: true,
            // start: 70,
            // end: 100
        }
    ],
        series: [{
          name: this.title,
          data: this.yAxis,
          type: 'line',
          smooth:true,
          // symbol: 'emptyCircle',
          symbolSize: 5,
          lineStyle: {
            color: '#699EE5',
            shadowBlur: 12,
            shadowColor: 'rgb(33,148,246,0.5)',
            shadowOffsetX: 1,
            shadowOffsetY: 1
          },
          areaStyle: { //区域填充样式
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(65, 165, 245,1)'
								},
								{
									offset: 1,
									color: 'rgba(228, 244, 255,0)'
								}
							], false),
							shadowBlur: 0 
						}
					},
          itemStyle: {
            color: '#699EE5',
            borderWidth: 1
          }
        }]
      });
    }
  },
  watch:{
    data:{
      handler(newVal){
        this.dataList = this.spliteNumber(newVal,Math.ceil(newVal.length/3))
        // console.log("来了",this.dataList)
      },
      deep:true,
      immediate:true
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-table__row > td {
  border: none;
}
/deep/.el-table::before {
  height: 0px;
}
/deep/th.is-leaf {
  border-bottom: none;
}
.tableList {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  & > div {
    width: 33.3%;
  }
}
.chartsContainer{
  width: 880px;
  height: 400px;
}
</style>
